import React, {
	Component
} from 'react';
import {
	connect
} from 'react-redux';

// const TodoListForReactRedux = (props) => {
// 	const {
// 		inputValue,
// 		list,
// 		handleInputChange,
// 		handleBtnClick,
// 		handleItemDel
// 	} = props;

// 	return (
// 		<div>
// 				<div>
// 					<input 
// 						value = {inputValue}
// 						onChange = {handleInputChange}
// 					/>
// 					<button
// 						onClick = {handleBtnClick}
// 					>提交</button>
// 				</div>
// 				<ul>
// 					{
// 						list.map((item, index)=>{
// 							return (<li key = {index}
// 													onClick = {()=>{handleItemDel(index)}}
// 											>{item}</li>);
// 						})
// 					}
// 				</ul>
// 			</div>
// 	);
// }

class TodoListForReactRedux extends Component {

	render() {
		const {
			inputValue,
			list,
			handleInputChange,
			handleBtnClick,
			handleItemDel
		} = this.props;

		return (
			<div>
				<div>
					<input 
						value = {inputValue}
						onChange = {handleInputChange}
					/>
					<button
						onClick = {handleBtnClick}
					>提交</button>
				</div>
				<ul>
					{
						list.map((item, index)=>{
							return (<li key = {index}
													onClick = {()=>{handleItemDel(index)}}
											>{item}</li>);
						})
					}
				</ul>
			</div>
		);
	}

	componentDidMount() {}

}

const mapStateToProps = (state) => {
	// console.log(state);
	return {
		inputValue: state.inputValue,
		list: state.list
	}
}

const mapDispatchToProps = (dispatch) => {
	return {
		handleInputChange(e) {
			const action = {
				type: 'input_change',
				value: e.target.value
			}
			dispatch(action);
		},

		handleBtnClick() {
			const action = {
				type: 'add_item'
			}
			dispatch(action);
		},

		handleItemDel(index) {
			const action = {
				type: 'delete_item',
				index
			}
			dispatch(action);
		},

		initList() {

		}

	}
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoListForReactRedux);